<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color:#e4393c;
				/*外边距 自适应居中*/
				margin: 200px auto;
				transform:rotate(135deg);
				/*透明度：属性值范围值0-1*/
				opacity: .7;
				/*滤镜属性：下阴影 产生光晕效果
				       drop-shadow(x轴y轴 模糊距离 模糊颜色)
				*/
				filter: drop-shadow(0 0 100px #e4393c);
				/*动画 复合属性 2.启动动画*/
				animation: heart .5s linear infinite;
				/*     关键帧名称 过渡时间 过渡方式 动画次数*/
			}
			/*
			* CSS3基础语法：选择器：抓取页面上元素添加效果
			* ③伪类选择器：给元素添加附加效果
			* 语法：选择器：hover 当鼠标悬停时给元素添加效果
			*      选择器：before 在元素之前生成内容，通常与content属性使用
			*      选择器：after 在元素之后生成内容，通常与content属性使用
			*/
		     /*需求：心【四方块】上生成内容*/
			 
			div:before{
				content:"";
				/*CSS属性：显示属性
				display:block;转换成块元素
				display:inline;转换成行元素
				display:none;元素消失
				*/
			    display: block;
				/*画圆：1.空间 2.边框/背景填充 3.倒角*/
				width:200px;
				height:200px;
				background-color:#e4393c;
				border-radius:50%;
				/*相对定位*/
				position: relative;
				left: -100px;
			}
			div:after{
				content: "";
				display: block;
				width: 200px;
				height: 200px;
				background-color:#e4393c;
				border-radius: 50%;
				/*相对定位*/
				position: relative;
				top: -100px;
			}
			/*动画：1.创建关键帧*/
			@keyframes heart{
			0%{/*scale(1)等比例*/
				/*转换属性[复合属性]：旋转 缩放 平移*/
			transform:rotate(135deg)scale(1) ;	
			}
			30%{/*scale(.8)缩小*/
			transform:rotate(135deg) scale(.8);	
			}
			100%{/*scale(1.2)缩大*/
			transform:rotate(135deg) scale(1.6);	
			}
			}
		</style>
	</head>
	<body>
		<!--心 思路：设置一个div 产生两个圆:伪类选择器
		    html    元素分类：所有元素明确种类
		            块元素：可以设置高宽，独占一行，典型div  
		            行元素：不可以设置高宽，在一行内显示，典型span
					*文本就是行元素
					行内块元素：可以设置高宽，在一行内显示，典型   
		-->
		<div></div>
		
	</body>
</html>